<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 600px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            Vue框架而言 取值：{{ Vue对象数据仓库变量|匿名变量|JS简单表达式|JS内置对象或者内置功能 }}
            1、匿名变量 遵循JS匿名变量的定义语法，直接进行变量定义
                        如果使用ES6的模板语法，模板中的 ${} 变量取值必须来自于容器对应vue实例的仓库变量
                        如果定义匿名对象，为保证语法正常解析，匿名对象的{} 和 插值表达式的{{}} 之间必须存在明确分割符空格
            2、JS简单表达式 : 四则运算、比较运算、逻辑运算、三元运算(三目运算)、取值表达式[]、链式表达式.
            3、JS内置对象或者内置功能 ：js环境中可以直接被访问的相关对象，或者某些变量的原型方法和属性
                        - 如果对应的vue实例仓库中data出现了内置对象重名的变量，插值表达式优先取仓库变量
                        - 约定：仓库中的变量名避开 JS内置对象变量名和 JS 关键字
        -->
        <h3>匿名字符串:{{ "双引号字符串" }}</h3>
        <!-- <h3>匿名字符串:双引号字符串</h3> -->
        <h3>匿名字符串:{{ '单引号字符串' }}</h3>
        <h3>匿名字符串:{{ `模板字符串，插入变量:${arg}` }}</h3>
        <h3>匿名字符串:模板字符串，插入变量:{{arg}}</h3>
        <h3>匿名数值:{{ 123 }}</h3>
        <h3>匿名时间对象:{{ new Date() }}</h3>
        <h3>匿名数组:{{ [1,2,3,4,5] }}</h3>
        <!-- <h3>匿名对象（报错的）:{{{name:'tom',age:23}}}</h3> -->
        <h3>匿名对象:{{ {name:'tom',age:23} }}</h3>
        <hr>
        <h3>四则运算：{{ 1+10 }}</h3>
        <h3>四则运算：{{ Math.floor(num/10000) + "万" }}</h3>
        <h3>比较运算：{{ arg>100 }}</h3>
        <h3>逻辑元素：{{ flag&&flag1 }}</h3>
        <h3>三目运算：{{ flag?"会员用户":"非会员用户" }}</h3>
        <h3>直接取数组:{{ arr }}</h3>
        <p>arr[0]:{{ arr[0] }}</p>
        <p>arr[1]:{{ arr[1] }}</p>
        <p>arr[2]:{{ arr[2] }}</p>
        <h3>直接取对象:{{ user }}</h3>
        <p>user.name:{{ user.name }}</p>
        <p>user["name"]:{{ user["name"] }}</p>
        <p>user.age:{{ user.age }}</p>
        <p>user["age"]:{{ user["age"] }}</p>
        <!-- <p>user中的属性101(报错):{{ user.101 }}</p> -->
        <p>user中的属性101:{{ user[101] }}</p>
        <!-- 下面的代码中 key 必须是vue仓库中的数据变量 -->
        <p>user中的属性取值:{{ user[key] }}</p>
        <hr>
        <p>Math.PI:{{ Math.PI }}</p>
        <P>数组的元素个数：{{ arr.length }}</P>
        <P>对象的转换方法：{{ Object.values(user) }}</P>
        <p>7.0:{{ rate.toFixed(1) }}</p>
        <hr>
        <p>JSON：{{ JSON }}</p>
    </div>
</body>
<script>
    // console.log( "字符串" );
    // console.log( 123 );

    new Vue({
        el:"#app",
        data:{
            arg:"仓库变量",
            num:99999,
            flag:false,
            flag1:true,
            arg:100,
            arr:["aaaa","bbbb","cccc"],
            user:{
                name:"tom",
                age:23,
                101:"测试数据"
            },
            key:"age",
            rate:7,
            JSON:"和JS内置对象JSON重名"
        }
    })
</script>
</html>